<template>
  <view class="container">
    <ve-navbar :title="pageTitle">
      <template #right>
        <view
          class="header-right"
          v-if="usePermission('svmsapp:car-manage.add-bill') && !contractInfo.contractStatus && options.installment == 1"
          @click="addStages"
        >
          <text class="iconfont ve-icon-add"></text>
          添加新分期
        </view>
      </template>
    </ve-navbar>
    <view class="tips" v-if="contractInfo.contractStatus">
      <image class="img" src="@/static/images/alert_icon.png" mode="widthFix"></image>
      如需修改付款计划，请先保存页面信息，再前往车辆的
      <span style="color: #3072f6">【费用信息】</span>页面，点击 <span style="color: #3072f6">【修改费用】</span>进行调整。
    </view>
    <view class="bill-detail-box" ref="myElement">
      <view class="bill-top">
        <!-- 编辑、修改费用 -->
        <view class="bill-detail-item" v-if="contractInfo.contractStatus !== 'new' || options.id">
          车辆费用单号： <span style="color: #3072f6; font-weight: 400">{{ options.businesCode || contractInfo.businesCode }}</span></view
        >
        <view class="bill-box">
          <view class="bill-box-money">
            <view class="label">应{{ sourceTit }}总额</view>
            <view class="num"
              ><span>{{ allAmount.payableTotalAmount || 0 }}</span> 元</view
            >
          </view>
          <view class="bill-box-money">
            <view class="label">已{{ sourceTit }}总额</view>
            <view class="num"
              ><span>{{ allAmount.paidTotalAmount || 0 }}</span> 元</view
            >
          </view>
          <view class="bill-box-money">
            <view class="label">剩余应{{ sourceTit }}</view>
            <view class="num"
              ><span>{{ allAmount.unpaidTotalAmount || 0 }}</span> 元</view
            >
          </view>
        </view>
      </view>
      <view class="bill-detail-content">
        <ve-form ref="formRef" :model="form" :rules="rules">
          <template v-if="options.installment || contractInfo.contractStatus">
            <template v-for="(item, index) in form.listData" :key="item.id">
              <ve-card class="bill-card" :class="{ 'bill-card-latest-add': item.latestAdd }" v-model:initFold="item.initFold">
                <template #title>
                  <view class="card__status" :class="item.payableStatus == 'paid' ? 'card-green' : ''">
                    <view class="bill-tit"
                      >{{
                        options.feeCategory == 5 || (options.feeCategory == 6 && options.installment == 0)
                          ? ''
                          : allAmount.feeCategoryName + '-'
                      }}{{ item.payableNumStr }}</view
                    >
                    <view class="tit" :class="item.payableStatus == 'paid' ? 'tit-green' : ''">{{ item.payableStatusName }}</view>
                  </view>
                </template>

                <ve-cell
                  label="应结日期"
                  v-if="(item.payableStatus == 'paid' && item.payableNum > 0) || contractInfo.contractStatus"
                >
                  {{ item.payableTimeStr }}
                </ve-cell>
                <ve-form-item v-else label="应结日期" :prop="`listData.${index}.payableTimeStr`">
                  <ve-date-picker
                    v-model="item.payableTimeStr"
                    :minDate="item.minDate"
                    :maxDate="item.maxDate"
                    @change="onDateChange()"
                    mode="date"
                    placeholder="请选择应结日期"
                  />
                </ve-form-item>

                <ve-cell :label="'应' + sourceTit + '金额'" v-if="item.payableStatus == 'paid' || contractInfo.contractStatus">
                  <span style="color: #3072f6">{{ item.payableAmount || '0' }}</span> 元
                </ve-cell>
                <ve-form-item v-else :label="'应' + sourceTit + '金额'" unit="元" :prop="`listData.${index}.payableAmount`">
                  <ve-input-number v-model="item.payableAmount" :min="0.01" :precision="2" placeholder="请输入应付金额" />
                </ve-form-item>

                <ve-cell :label="'实' + sourceTit + '金额'" v-if="item.payableStatus == 'paid' || contractInfo.contractStatus">
                  <span style="color: #3072f6">{{ item.paymentAmount || '0' }} </span> 元
                </ve-cell>
                <ve-form-item v-else :label="'实' + sourceTit + '金额'" unit="元"> - </ve-form-item>

                <ve-cell :label="'实际' + sourceTit + '款时间'" v-if="item.payableStatus == 'paid' || contractInfo.contractStatus">
                  {{ item.paymentTime || '-' }}
                </ve-cell>
                <ve-form-item v-else :label="'实际' + sourceTit + '款时间'"> - </ve-form-item>

                <ve-cell label="备注" v-if="contractInfo.contractStatus">
                  {{ item.billRemark || '-' }}
                </ve-cell>
                <ve-form-item v-else label="备注" :borderBottom="false" labelPosition="top">
                  <ve-input type="textarea" v-model="item.billRemark" placeholder="请输入" />
                </ve-form-item>
                <view
                  v-if="item.payableStatusName !== '已付款' && item.payableStatusName !== '已收款' && !contractInfo.contractStatus"
                  class="ve-form-item-btn delete-btn"
                  @click="onClose(item, index)"
                >
                  <!-- svg: 红色 -->
                  <ve-icon class="delete_2" name="delete_2" color="#cf4444" size="30" />
                  <span class="ve-form-item-btn-text delete-text">删除账期</span>
                </view>
              </ve-card>
            </template>
          </template>
        </ve-form>
      </view>
    </view>
  </view>

  <ve-modal title="保存分期账单" v-model="billPlanVisiable" @cancel="onBillPlanCancel" @confirm="onBillPlanConfirm">
    <view class="confirm-content">
      <!-- 首尾款变化提示 -->
      <view class="confirm-item" v-if="confirmData.amountData?.length > 0">
        <view class="confirm-item-title">{{ getInitialOrBalanceAmountChangeTitleFn() }}</view>
        <view class="confirm-item-content">
          <view class="compare compare-left">
            <view class="compare-title">修改前</view>
            <view class="compare-content">
              <view class="change-item" v-for="(item, index) in confirmData.amountData" :key="index">
                <span class="change-item-title">{{ item.name }}：</span>
                <span class="change-item-value">{{ addUnit(item.prev, '元') }}</span>
              </view>
            </view>
          </view>
          <view class="compare compare-right">
            <view class="compare-title">修改后</view>
            <view class="compare-content">
              <view class="change-item" v-for="(item, index) in confirmData.amountData" :key="index">
                <span class="change-item-title">{{ item.name }}：</span>
                <span class="change-item-value">{{ addUnit(item.now, '元') }}</span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <a-divider style="margin: 20px 0 16px" v-if="confirmData.totalAmount?.change" />
      <!-- 总金额变化提示 -->
      <view class="confirm-item" v-if="confirmData.totalAmount?.change">
        <view class="confirm-item-title">账单总金额发生变化，是否要保存？</view>
        <view class="confirm-item-content">
          <view class="compare compare-left">
            <view class="compare-title">修改前</view>
            <view class="compare-content">
              <view class="change-item">
                <span class="change-item-title">账单总金额：</span>
                <span class="change-item-value">{{ addUnit(confirmData.totalAmount.prev, '元') }}</span>
              </view>
            </view>
          </view>
          <view class="compare compare-right">
            <view class="compare-title">修改后</view>
            <view class="compare-content">
              <view class="change-item">
                <span class="change-item-title">账单总金额：</span>
                <span class="change-item-value">{{ addUnit(confirmData.totalAmount.now, '元') }}</span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <a-divider style="margin: 20px 0 16px" v-if="confirmData.lnstalmentNum?.change" />
      <!-- 分期期数变化提示 -->
      <view class="confirm-item" v-if="confirmData.lnstalmentNum?.change">
        <view class="confirm-item-title">分期期数发生变化，是否要保存？</view>
        <view class="confirm-item-content">
          <view class="compare compare-left">
            <view class="compare-title">修改前</view>
            <view class="compare-content">
              <view class="change-item">
                <span class="change-item-title">分期期数：</span>
                <span class="change-item-value">{{ addUnit(confirmData.lnstalmentNum.prev, '期') }}</span>
              </view>
            </view>
          </view>
          <view class="compare compare-right">
            <view class="compare-title">修改后</view>
            <view class="compare-content">
              <view class="change-item">
                <span class="change-item-title">分期期数：</span>
                <span class="change-item-value">{{ addUnit(confirmData.lnstalmentNum.now, '期') }}</span>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </ve-modal>

  <ve-bottom-box size="mini" v-if="status === 'edit' && payableStatus">
    <ve-button type="primary" size="long" @click="onSubmit">保存</ve-button>
  </ve-bottom-box>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, computed, nextTick, watch } from 'vue'
  import { scroll2el } from '@/utils/scroll2el'
  import {
    getBillPlan,
    findPayableListById,
    getLendCostList,
    editFindPayableListById,
    getCarAssetFeeDetailDtoById,
  } from '@/api/asset/car-manager'
  import { updateAssetFeePlan, editFeeDetailForType2 } from '@/api/asset/asset-fee'
  import { onLoad } from '@dcloudio/uni-app'
  import { usePermission } from '@/hooks/usePermission'
  import { addFee } from '@/api/asset/asset-fee'

  const payableStatus = ref(true)
  const billPlanVisiable = ref(false)
  const status = ref('new')
  const formRef = ref()
  let form = reactive<any>({
    listData: [],
  })
  const rules = computed(() => {
    const _rules: any = {}
    form.listData.forEach((item: any, index: number) => {
      _rules[`listData.${index}.payableTimeStr`] = {
        required: true,
        message: '请选择',
      }
      _rules[`listData.${index}.payableAmount`] = {
        required: true,
        message: '请输入',
      }
    })
    return _rules
  })
  const repairList = [
    { value: 0, label: '收款' },
    { value: 1, label: '付款' },
  ]

  const onClose = (record: any, index: number) => {
    // 判断当前点击的数据的 payableNum 是否大于 0
    if (options.value.installment == '1') {
      const isPayableNumLarge = record.payableNum > 0
      if (isPayableNumLarge) {
        // 找到所有 payableNum > 0 的项
        const payableNumPositiveItems = form.listData.filter((item) => item.payableNum > 0)
        // 如果分期部分只剩下一期，不允许删除
        if (payableNumPositiveItems.length === 1) {
          uni.showToast({
            title: `分期期数不能少于一期`,
            icon: 'none',
          })
          return
        }
        // 获取分期部分最后一项的索引
        const lastIndex = form.listData.lastIndexOf(payableNumPositiveItems[payableNumPositiveItems.length - 1])
        // 如果当前点击的索引不是分期部分的最后一项，提示无法删除
        if (index !== lastIndex) {
          uni.showToast({
            title: `分期部分的账期请从最后一期开始删除`,
            icon: 'none',
          })
          return
        }
      }
    }
    // 符合条件，正常删除对应账期
    form.listData.splice(index, 1)
    form.listData = processAndSetDates(form.listData)
  }

  const myElement = ref(null)
  const addStages = () => {
    let tableVal = form.listData
    // 获取所有 payableNum > 0 的项
    const positiveItems = tableVal.filter((item: { payableNum: number }) => item.payableNum > 0)
    if (positiveItems.length === 0) {
      console.warn('没有找到 payableNum > 0 的分期部分')
      return
    }
    // 找到最后一个 payableNum > 0 的项
    const lastPositiveItem = positiveItems[positiveItems.length - 1]
    const lastIndex = tableVal.findIndex((item: any) => item === lastPositiveItem)
    // 递归查找最近的有效 payableTimeStr
    const findMinDate = (index) => {
      if (index < 0) {
        return new Date(new Date().getFullYear() - 10, 0, 1).getTime() // 如果没有有效值，返回过去10年的时间
      }
      const currentItem = tableVal[index]
      if (currentItem.payableTimeStr) {
        return new Date(currentItem.payableTimeStr).getTime()
      }
      return findMinDate(index - 1) // 继续向上查找
    }
    // 设置新分期的 minDate
    const minDate = findMinDate(lastIndex)
    // 新分期的 payableNum 和 payableNumStr
    let payableNum = lastPositiveItem.payableNum + 1
    let payableNumStr = `第${payableNum}期`
    // 删除已有分期的 latestAdd 属性
    form.listData.forEach((item: any) => {
      delete item.latestAdd
    })
    // 创建新分期项
    let newTableItem = {
      payableNum,
      payableNumStr: payableNumStr,
      settlementStatusStr: '待结算',
      payableStatusName: '未付款',
      contractId: contractInfo.value,
      minDate: minDate, // 使用计算得出的 minDate
      latestAdd: true, // 标识是最新添加的分期
    }
    // 在最后一个 payableNum > 0 的项后面插入新分期
    form.listData.splice(lastIndex + 1, 0, newTableItem)
    nextTick(() => {
      // 滚动到新添加的分期位置
      scroll2el('.bill-card-latest-add')
    })
  }

  const getInitialOrBalanceAmountChangeTitleFn = () => {
    const names = confirmData.value.amountData.map((item: any) => item.name).filter((name: any) => !!name)
    if (names.length > 0) {
      return `${names.join('/')}金额发生变化，是否要保存？`
    } else {
      return
    }
  }

  const addUnit = (val: any, unit: any) => {
    if (val != '删除') {
      return val + ' ' + unit
    }
    return val
  }

  const onBillPlanCancel = () => {
    billPlanVisiable.value = false
  }

  const onBillPlanConfirm = () => {
    saveApi()
  }

  const saveApi = () => {
    let list = form.listData
    let tempList = list.map((item: any) => {
      let payableTime = item.payableTimeStr.replace(/\//g, '-') + ' 00:00:00'
      return {
        id: item.id,
        payableNum: item.payableNum,
        payableTime: payableTime,
        payableAmount: item.payableAmount,
        billRemark: item.billRemark,
        contractId: item.contractId,
      }
    })
    if (options.value.feeNameId == 59) {
      // 借调费借出
      editFeeDetailForType2({
        id: options.value.businesId,
        payableList: tempList,
      })
        .then(() => {
          uni
            .showToast({
              title: '修改费用成功',
            })
            .then(() => {
              uni.navigateBack()
            })
        })
        .catch((err: any) => {
          uni.showToast({
            title: err.data.message,
            icon: 'none',
          })
        })
    } else if (options.value.feeNameId == 58) {
      let arr = form.listData.map((item: { payableAmount: any; billRemark: any; payableTimeStr: any }) => {
        return Object.assign(item, {
          amount: item.payableAmount,
          remark: item.billRemark,
          dueDate: item.payableTimeStr,
        })
      })
      // 跨门店用车借调费
      addFee({
        id: options.value.id,
        feeList: arr,
        feeId: options.value._id,
      })
        .then(() => {
          uni
            .showToast({
              title: '修改费用成功',
            })
            .then(() => {
              uni.navigateBack()
            })
        })
        .catch((err: any) => {
          uni.showToast({
            title: err.data.message,
            icon: 'none',
          })
        })
    } else {
      updateAssetFeePlan({
        id: options.value.businesId,
        payableList: tempList,
      })
        .then(() => {
          uni
            .showToast({
              title: '修改费用成功',
            })
            .then(() => {
              uni.navigateBack()
            })
        })
        .catch((err: any) => {
          uni.showToast({
            title: err.data.message,
            icon: 'none',
          })
        })
    }
  }

  // 获取分期数
  const getInstalmentNum = (data: any) => {
    return data.filter((item: any) => item.payableNum > 0).length
  }
  //比较价格提取
  const processPayableData = (payableNum: number, name: string, prevData: any[], nowData: any[], amountData: any[]) => {
    if (prevData.some((item: { payableNum: any }) => item.payableNum === payableNum)) {
      const obj = {
        name,
        prev: '',
        now: '',
      }
      const prevIndex = prevData.findIndex((item: { payableNum: any }) => item.payableNum === payableNum)
      obj.prev = prevData[prevIndex].payableAmount

      const nowIndex = nowData.findIndex((item: { payableNum: any }) => item.payableNum === payableNum)
      if (nowIndex !== -1) {
        obj.now = nowData[nowIndex].payableAmount
      } else {
        obj.now = '删除'
      }

      // 检查是否发生变化
      if (obj.prev !== obj.now) {
        amountData.push(obj)
        return true // 表示发生了变化
      }
    }
    return false // 表示没有变化
  }
  const confirmData = ref()
  const onSubmit = () => {
    if (options.value.installment == '1') {
      formRef.value.validate((valid: any, errors: any) => {
        if (valid) {
          let nowData = form.listData
          let prevData = prevRecordData.payableList
          let amountData: any = []
          // 变化的数量
          let changedNumber = 0
          // 1 费用是否有变化

          const payableItems = [
            { payableNum: -10, name: '购置税' },
            { payableNum: -11, name: '过户费' },
            { payableNum: -12, name: '运输费' },
            { payableNum: -13, name: '保证金' },
            { payableNum: -14, name: '手续费' },
            { payableNum: -1, name: '首付' },
            { payableNum: -2, name: '尾款' },
          ]

          payableItems.forEach(({ payableNum, name }) => {
            const changed = processPayableData(payableNum, name, prevData, nowData, amountData)
            if (changed) {
              changedNumber += 1
            }
          })
          // 2 账单总金额同车辆详情中设置的合同总金额是否有出入
          let totalAmount = {
            change: false,
            prev: 0,
            now: 0,
          }
          let prevSum = 0
          prevData.forEach((item: any) => {
            prevSum += Number(item.payableAmount)
          })
          let nowSum = 0
          nowData.forEach((item: any) => {
            nowSum += Number(item.payableAmount)
          })
          totalAmount.prev = Number(prevSum.toFixed(2))
          totalAmount.now = Number(nowSum.toFixed(2))
          let changedTotalAmount = prevSum != nowSum
          if (changedTotalAmount) {
            totalAmount.change = changedTotalAmount
            changedNumber += 1
          }
          // 3 期数是否有变化
          let prevInstalmentNum = getInstalmentNum(prevData)
          let nowInstalmentNum = getInstalmentNum(nowData)
          let lnstalmentNum = {
            change: false,
            prev: prevInstalmentNum,
            now: nowInstalmentNum,
          }
          let changedInstalmentNum = prevInstalmentNum != nowInstalmentNum
          if (changedInstalmentNum) {
            lnstalmentNum.change = true
            changedNumber += 1
          }
          if (changedNumber > 0) {
            console.log('修改了付款计划，需要二次确认')
            confirmData.value = {
              amountData,
              totalAmount,
              lnstalmentNum,
            }
            console.log(confirmData.value, 'confirmData')
            billPlanVisiable.value = true
          } else {
            saveApi()
          }
        } else {
          console.log('error', errors)
        }
      })
    }
    if (options.value.installment == '0') {
      saveApi()
    }
  }
  const processAndSetDates = (list: any[]) => {
    const defaultMinDate = new Date(new Date().getFullYear() - 10, 0, 1).getTime() // 过去十年
    const defaultMaxDate = new Date(new Date().getFullYear() + 10, 0, 1).getTime() // 未来十年

    // 递归查找上一期有效的 payableTimeStr（仅限 payableNum > 0）
    const findPrevDate = (currentIndex: number): number => {
      if (currentIndex < 0) return defaultMinDate // 返回默认最小日期
      const prevItem = list[currentIndex]
      if (prevItem.payableNum > 0 && prevItem.payableTimeStr) {
        return new Date(prevItem.payableTimeStr).getTime()
      }
      return findPrevDate(currentIndex - 1) // 继续向上查找
    }

    // 递归查找下一期有效的 payableTimeStr（仅限 payableNum > 0）
    const findNextDate = (currentIndex: number): number => {
      if (currentIndex >= list.length) return defaultMaxDate // 如果越界，返回默认最大日期
      const nextItem = list[currentIndex]
      if (nextItem.payableNum > 0 && nextItem.payableTimeStr) {
        return new Date(nextItem.payableTimeStr).getTime()
      }
      return findNextDate(currentIndex + 1) // 继续向下查找
    }

    // 遍历列表并处理日期范围
    list.forEach((item: any, index: number) => {
      if (item.payableNum == -1) {
        // 找到尾款项
        const tailItem = list.find((record: any) => record.payableNum == -2)
        if (tailItem) {
          tailItem.minDate = item.payableTimeStr ? new Date(item.payableTimeStr).getTime() : defaultMinDate
        }
      } else if (item.payableNum == -2) {
        // 找到首付项
        const initialItem = list.find((record: any) => record.payableNum == -1)
        if (initialItem) {
          initialItem.maxDate = item.payableTimeStr ? new Date(item.payableTimeStr).getTime() : defaultMaxDate
        }
      } else if (item.payableNum > 0) {
        // 分期部分
        const minDate = findPrevDate(index - 1) // 找到上一期有效日期
        const maxDate = findNextDate(index + 1) // 找到下一期有效日期
        item.minDate = minDate
        item.maxDate = maxDate
      } else {
        // 非分期部分
        item.minDate = defaultMinDate
        item.maxDate = defaultMaxDate
      }
    })

    return list // 返回处理后的列表
  }

  const onDateChange = () => {
    form.listData = processAndSetDates(form.listData)
  }
  const contractInfo = ref({})
  const allAmount = ref({})
  onMounted(() => {
    // 查看付款计划
    uni.$once('viewContractInfoNoId', (value) => {
      console.log('viewContractInfoNoId', value)
      contractInfo.value = value
      if (value.contractStatus == 'new') {
        console.log('新增车辆或编辑车辆改动了金额预览')
        getBillPlan(value).then((res) => {
          console.log('getBillPlan', res)
          const result = res.result as any
          form.listData = result.payableList || []
          allAmount.value = result
        })
      } else if (value.contractStatus == 'edit') {
        editFindPayableListById(value).then((res) => {
          console.log('editFindPayableListById', res)
          const result = res.result as any
          form.listData = result.payableList || []
          allAmount.value = result
        })
      } else if (value.contractStatus == 'detail') {
        findPayableListById({ id: value.id }).then((res) => {
          console.log('findPayableListById', res)
          const result = res.result as any
          form.listData = result.payableList || []
          allAmount.value = result
        })
      }
    })
  })

  let prevRecordData: any = null
  const options = ref()
  const noInstalment = ref<any>({
    totalAmount: '',
  })

  const pageTitle = ref('查看付款计划')
  const sourceTit = ref('付')
  onLoad((option: any) => {
    console.log('option', option)
    options.value = option // 保存参数
    if (option.status) {
      status.value = option.status
    }
    if (option.id) {
      pageTitle.value = '修改费用'
      contractInfo.value = option.id
      // 分期账单详情
      if (option.feeNameId == 59) {
        sourceTit.value = '收'
        // 借出
        getLendCostList({ id: option.id }).then((res: any) => {
          const result = res.result as any
          // 数据字段统一
          result.payableList = result.payableList.map((item) => {
            return Object.assign(item, { billRemark: item.remark })
          })
          form.listData = processAndSetDates(result.payableList) || []
          prevRecordData = JSON.parse(JSON.stringify(result))
          allAmount.value = result
        })
      } else if (option.feeNameId == 58) {
        // 借调费
        getCarAssetFeeDetailDtoById({ id: option._id }).then((res: any) => {
          // 数据结构不同 提取字段
          const result = res.result as any
          allAmount.value = {
            payableTotalAmount: result.totalAmount,
            paidTotalAmount: result.payAmount,
            unpaidTotalAmount: result.surplusAmount,
          }
          form.listData = [
            Object.assign(result.feeDetailList[0], {
              payableNumStr: result?.feeDetailList[0]?.itemName || '',
              payableTimeStr: result.dueDate,
              payableAmount: result.totalAmount,
              paymentTime: result.payTime,
              payableStatusName: result.feeStatusName,
              billRemark: result.remark,
            }),
          ]
        })
      } else {
        // 购置费
        findPayableListById({ id: option.id }).then((res) => {
          console.log('findPayableListById', res)
          const result = res.result as any
          form.listData = processAndSetDates(result.payableList) || []
          prevRecordData = JSON.parse(JSON.stringify(result))
          allAmount.value = result
        })
      }
    }
  })
  watch(
    () => form.listData,
    (newVal) => {
      allAmount.value.payableTotalAmount = newVal.reduce((total, item) => {
        // 确保 item.payableAmount 是数字，若不是则默认使用 0
        const payableAmount = Number(item.payableAmount) || 0
        return total + payableAmount
      }, 0)
      // 保证小数点后两位，避免浮点数精度问题
      allAmount.value.payableTotalAmount = parseFloat(allAmount.value.payableTotalAmount.toFixed(2))
      // 确保计算结果是数字，若是 NaN 或其他非数字，设为 0
      allAmount.value.unpaidTotalAmount =
        parseFloat((Number(allAmount.value.payableTotalAmount) - Number(allAmount.value.paidTotalAmount)).toFixed(2)) || 0
    },
    { immediate: true, deep: true },
  )
</script>
<style scoped lang="less">
  .header-right {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #165dff;
    text-align: left;
    font-style: normal;
    text-transform: none;
    .iconfont {
      color: #165dff;
    }
  }

  .ve-bottom-box {
    height: 132rpx;
  }
  .bill-card {
    /deep/ .ve-card-header {
      padding: 0;
    }
  }
  .card__status {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 24rpx;
    display: flex;
    justify-content: space-between;
    border-radius: 10rpx;
    background: linear-gradient(90deg, #fde7e7 0%, #ffffff 100%);
  }

  .card-green {
    background: linear-gradient(90deg, #8be8a1 0%, #ffffff 100%);
  }
  .bill-tit {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    color: #191c27;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .tit {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    text-align: right;
    font-style: normal;
    text-transform: none;
    color: #fe615a;
  }
  .tit-green {
    color: #00b42a;
  }

  .container {
    height: auto;
    background: #f7f8fa;
    padding-bottom: 24rpx;
    .bill-detail-box {
      margin: 0 24rpx;
    }
    .bill-top {
      width: 100%;
      background: #fff;
      padding: 0 24rpx;
      margin: 24rpx 0;
      .bill-detail-item {
        display: flex;
        flex-wrap: wrap;
        font-size: 32rpx;
        font-weight: 600;
        color: #191c27;
        word-break: break-all;
        padding: 32rpx 0;
        display: flex;
        border-bottom: 1rpx solid #f4f4f4;
      }
      .bill-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 0;
        .bill-box-money {
          width: 100%;
          text-align: center;
          border-right: 2rpx solid #f4f4f4;
          .label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #4e5969;
            line-height: 44rpx;
            font-style: normal;
            text-transform: none;
          }
          .num {
            font-family: PingFang SC, PingFang SC;
            font-size: 28rpx;
            line-height: 44rpx;
            font-style: normal;
            text-transform: none;
            span {
              color: #3072f6;
              font-weight: 600;
            }
          }
        }
        .bill-box-money:last-child {
          border-right: none;
        }
      }
    }
  }

  :deep(.ve-cell-content) {
    word-break: break-all;
  }

  :deep(.ve-modal-body) {
    padding-bottom: 24rpx;
  }
  .confirm-item-title {
    font-size: 14px;
    color: #165dff;
    font-weight: 600;
    text-align: center;
    margin: 20px 0 10px;
  }
  .confirm-item:first-of-type {
    .confirm-item-title {
      margin-top: 0;
    }
  }
  .tips {
    width: 100%;
    background: #e8f3ff;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding: 30rpx 24rpx;
    .img {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .confirm-tips {
    color: #ff5b60;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .confirm-item-content {
    .compare {
      padding: 20px;
      width: calc(50% - 8px);
      display: inline-block;
    }
    .compare + .compare {
      margin-left: 16px;
    }
    .change-item + .change-item {
      margin-top: 8px;
    }
    .compare-left {
      background: #fbfbfc;
    }
    .compare-right {
      background: rgba(22, 93, 255, 0.05);
    }
    .compare-title {
      color: #1d2129;
      margin-bottom: 10px;
    }
    .change-item-title {
      color: #4e5969;
    }
    .change-item-value {
      color: #1d2129;
    }
  }

  .ve-card:last-child {
    margin-bottom: 0;
  }
  .delete-btn {
    margin-bottom: 24rpx;
    border: 2rpx solid #fe615a;
    background: #ffffff;
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .delete_2 {
      margin: 2rpx 18rpx 0 0;
    }
    .delete-text {
      color: #fe615a !important;
    }
  }
</style>
